<script setup>

import {Delete, Edit, Plus, Search} from "@element-plus/icons-vue";
import {ref} from "vue";
import router from "@/router";
import {get, post} from "@/net";
import {useStore} from "@/stores/userStore";
import {ElMessage} from "element-plus";

const key = ref('')
const tableData = ref([])
const searchData = ref([])
const deleteDialog = ref(false)
const aidToDelete = ref(null)

const getData = () => {
    get('api/article/uid?uid=' + useStore().auth.user.uid,
        (data) => {
            tableData.value = data
            tableData.value.forEach((item, i) => {
                getTypename(i, item.tid)
                if (item.audit === '0') {
                    item.auditName = '未审核'
                } else if (item.audit === '1') {
                    item.auditName = '审核通过'
                } else {
                    item.auditName = '审核未通过'
                }
            })
            initData(tableData)
        })
}

const getTypename = (i, tid) => {
    get('api/type/tid?tid=' + tid, (data) => {
        tableData.value[i].type = data.type
    })
}

const openDelete = (aid) => {
    aidToDelete.value = aid
    deleteDialog.value = true
}

const deleteArticle = () => {
    post('api/article/delete', {
        aid: aidToDelete.value
    },  (message) => {
        deleteDialog.value = false
        getData()
        ElMessage.success(message)
    })
}

const search = () => {
    if (key.value !== '') {
        searchData.value = tableData.value.filter(item => item.title.includes(key.value))
        initData(searchData)
    } else {
        initData(tableData)
    }
}

const pageSize = 10 // 每页显示的数据数量
const currentPage = ref(1) // 当前页码
const total = ref(0) // 总数据条数
const pagedData = ref([]) // 当前页的数据

// 初始化数据
const initData = (data) => {
    total.value = data.value.length
    updatePageData(data)
}

// 更新当前页的数据
const updatePageData = (data) => {
    const start = (currentPage.value - 1) * pageSize
    const end = start + pageSize
    pagedData.value = data.value.slice(start, end)
}

// 处理页码变化的函数
const handlePageChange = (newPage) => {
    currentPage.value = newPage
    if (key.value === '') {
        updatePageData(tableData)
    } else {
        updatePageData(searchData)
    }
}

getData()

</script>

<template>
    <div class="content">
        <div class="content-top">
            <div style="margin: 16px 30px;font-size: 20px;font-weight: bold">
                我发布的文章
            </div>
            <div class="content-top-left">
                <el-input
                        v-model="key"
                        placeholder="请输入文章标题"
                        style="width: 200px;"
                >
                </el-input>
                <el-button style="height: 32px;width: 100px;" color="#c1c1c1" :icon="Search" @click="search">
                    搜索
                </el-button>
            </div>
            <div style="margin: 13px 0 13px 285px">
                <el-button
                        style="height: 32px;width: 100px;" type="success"
                        :icon="Plus"
                        @click="router.push('/my-article/new')"
                >
                    发布文章
                </el-button>
            </div>
        </div>
        <div class="content-bottom">
            <div class="content-list">
                <el-table
                        class="list"
                        border
                        stripe
                        empty-text="您还没有发布过文章呢，发布一篇试试吧~"
                        :data="pagedData"
                        :default-sort="{ prop: 'publish_time', order: 'descending' }"
                        style="width: 100%"
                >
                    <el-table-column prop="title" label="文章标题" width="200"/>
                    <el-table-column prop="type" label="文章类型" width="130" />
                    <el-table-column prop="publish_time" label="发布时间" sortable />
                    <el-table-column prop="auditName" label="审核状态" sortable>
                        <template #default="scope">
                            <el-tag
                                    :type="scope.row.audit === '0' ? '' : scope.row.audit === '1' ? 'success' : 'danger'"
                                    disable-transitions
                            >{{ scope.row.auditName }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" >
                        <template #default="scope">
                            <el-button-group>
                                <el-button type="primary" @click="router.push({path: '/my-article/update', query: {aid: scope.row.aid}})" :icon="Edit"/>
                                <el-button type="danger" :icon="Delete" @click="openDelete(scope.row.aid)"/>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-dialog
                    v-model="deleteDialog"
                    title="删除文章"
                    width="500"
                    align-center
            >
                <span>确定要删除该文章吗？</span>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="deleteDialog = false">
                            取消
                        </el-button>
                        <el-button type="danger" @click="deleteArticle">
                            删除
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <div>
                <el-pagination
                        style="margin: 20px 350px"
                        layout="total, prev, pager, next, jumper"
                        background
                        :page-size="pageSize"
                        :current-page="currentPage"
                        :total="total"
                        @current-change="handlePageChange"
                />
            </div>
        </div>
    </div>
</template>

<style scoped>
.content {
    width: 1014px;
    display: flex;
    flex-direction: column;
    margin: 20px auto;
    gap: 14px;
}

.content-top {
    width: 1014px;
    height: 60px;
    display: flex;
    flex-direction: row;
    background-color: rgba(255, 255, 255, 0.7)
}

.content-top-left {
    margin: 13px 20px;
    display: flex;
    flex-direction: row;
    border: #23211c 1px solid;
    width: 300px;
}

:deep(.el-input__wrapper) {
    padding: 0 2px;
    box-shadow: none;
}

.content-bottom {
    width: 1014px;
    background-color: rgba(255, 255, 255, 0.7)
}

.content-list {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.content-list:hover {
    background-color: rgba(236, 233, 233, 0.7);
}

.content-info span {
    margin-right: 50px;
}

</style>